<template>
  <div class="box">
    <div class="header">
      <el-button icon="" circle style="height:40px; width:40px;display: flex;align-items: center;justify-content: center; margin-right:10px">
        <i class="el-icon-circle-plus-outline" style="font-size:40px"></i>
      </el-button>
      <el-input
        v-model="search"
        placeholder="Type something"
        prefix-icon="el-icon-search"
      />
      <el-button icon="" style="height:40px; width:40px;display: flex;align-items: center;justify-content: center; margin-left:10px" circle>
        <i class="el-icon-search" style="font-size:40px"></i>
      </el-button>
    </div>
    <div style="margin-top:56px">
      <div class="moments" v-for="(item) in newList" v-bind:key="item">
        <div class="m-header">
          <el-avatar :size="55" :src="item.iconUrl" style="margin-right:30px"></el-avatar>
          <p style="font-size: 17px">{{item.username}}</p>
        </div>
        <div class="word"><span>{{item.word}}</span></div>
        <el-image
        style="width: 100%; height: 200px"
        :src="item.picUrl"
      ></el-image>
        <div class="operate">
          <el-button icon="" style="height:40px; width:40px;display: flex;align-items: center;justify-content: center; margin-left:10px" circle>
            <i class="el-icon-position" style="font-size:27px"></i>
          </el-button>
          <el-button icon="" style="height:40px; width:40px;display: flex;align-items: center;justify-content: center; margin-left:10px" circle>
            <i class="el-icon-chat-round" style="font-size:27px"></i>
          </el-button>
          <el-button icon="" style="height:40px; width:40px;display: flex;align-items: center;justify-content: center; margin-left:10px" circle>
            <i class="el-icon-star-off" style="font-size:27px"></i>
          </el-button>
        </div>
    </div>
    </div>
  </div>
</template>



<script>
import { reactive } from '@vue/reactivity';
// import {ref} from 'vue'
// import Vconsole from 'vconsole';
// import { useRouter } from 'vue-router';

export default {
  name: "Index",
  setup() {
    let newList = reactive([
      {
        userId:'1',
        username: '代码不可能不对',
        iconUrl:'http://pic2.zhimg.com/v2-0dc4e1abc7bf441be2fcbd34da8bdce9_b.jpg',
        word:'开心的一天从帅哥开始',
        picUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      },
      {
        userId:'1',
        username: '代码不可能不对',
        iconUrl:'http://pic2.zhimg.com/v2-0dc4e1abc7bf441be2fcbd34da8bdce9_b.jpg',
        word:'开心的一天从帅哥开始',
        picUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      },
      {
        userId:'1',
        username: '代码不可能不对',
        iconUrl:'http://pic2.zhimg.com/v2-0dc4e1abc7bf441be2fcbd34da8bdce9_b.jpg',
        word:'开心的一天从帅哥开始',
        picUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      }
    ])
    return{
      newList,
    }
  },
  components: {
  },
  mounted(){
    // new Vconsole();
  }
};
</script>

<style scoped>
.box {
  height: 100%;
  width: 100%;
  margin-bottom: 70px;
}
.header{
  background-color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  height: 55px;
  width: 100%;
  padding-top: 10px;
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid black;
}
.moments{
  height: 100%;
  width: 100%;
}
.m-header{
  padding:10px; 
  display: flex; 
  flex-direction: row;
}
.word{
  margin-left:20px; 
  margin-right:20px; 
  margin-bottom:10px
}
.operate{
  display: flex;
  flex-direction: row-reverse;
}
</style>
